<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>退款列表</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
    <link rel="stylesheet" href="/node_modules/LobsterUIFrame/weui/css/weui.css" />
    <link rel="stylesheet" href="/node_modules/LobsterUIFrame/weui/css/weuix.css" />
    <script src="/node_modules/LobsterUIFrame/weui/js/zepto.min.js"></script>
    <script src="/node_modules/LobsterUIFrame/weui/js/zepto.weui.js"></script>
    <script src="/node_modules/LobsterUIFrame/weui/js/swipe.js"></script>
    <script src="/node_modules/LobsterUIFrame/weui/js/macy.js"></script>
    <script src="/node_modules/LobsterUIFrame/weui/js/php.js"></script>
    <script src="/lobstersdk/lobster.js"></script>
    <script src="/jslib/template-web.js"></script>
    <style>
        body {
            background-color: #f5f5f5;
        }

        .list {
            border-radius: 10px;
            margin: 5px;
            background-color: white;
        }
    </style>
</head>

<body ontouchstart>
    <div class="list" id="refundlist">

    </div>
    <div class="weui-loadmore" id="more">
        <i class="weui-loading"></i>
        <span class="weui-loadmore__tips">正在加载</span>
    </div>
</body>

</html>

<script type="text/template" id="refundlisttemp">
    {{each list item}}
     <div class="weui-cell">
            <div class="weui-cell__bd">
                <p>{{(item.RefundDate||"").substring(0,19)}}</p>
            </div>
            <div class="weui-cell__ft">{{item.RefundTypetxt}}</div>
        </div>
        <div class="weui-panel__bd">
            <a href="javascript:void(0);" class="weui-media-box weui-media-box_appmsg">
                <div class="weui-media-box__hd">
                    <img class="weui-media-box__thumb" src="{{item.SpecImg}}" alt="">
                </div>
                <div class="weui-media-box__bd">
                    <h4 class="weui-media-box__title">{{item.GoodsName}}</h4>
                    <p class="weui-media-box__desc">规格：{{item.SpecName}}</p>
                    <p class="weui-media-box__desc">退款：￥{{item.RefundFee}}</p>
                </div>
                <div class="weui-media-box__bd">
                    {{item.RefundStatustxt}}
                </div>
            </a>
        </div>
        <div style="display: flex;justify-content: flex-end;">
            <div data-refundno="{{item.RefundNo}}">
                <a href="javascript:;" class="weui-btn weui-btn_mini weui-btn_primary todetail"></i>查看详情</a>
            </div>
        </div>
        {{/each}}
</script>
<script>

    lobsterh5.main({
        data: {
            refundList: [],
            refundStatusDict: [],
            page: 1, limit: 10, hasmore: true, isloading: false,
        },
        //初始化页面
        pageload: function () {
            var self = this;
            self.getDic(8147).then(res => {
                self.data.refundStatusDict = res.appbasedict;
                self.getRefundList();
            }).catch(res => {

            })
            this.initevent();
        },
        //初始化事件
        initevent: function () {
            var self = this;
            $("#refundlist").on("click", ".todetail", function () {
                location.href = "detail.html?refundNo=" + $(this).parent().data("refundno");
            })
            $(window).scroll(
                self.debounce(
                    function () {
                        let pageHeight = Math.max(document.body.scrollHeight, document.body.offsetHeight);
                        let viewportHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight || 0;
                        let scrollHeight = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
                        if (pageHeight - viewportHeight - scrollHeight < 50) {
                            self.getRefundList();
                        }
                    }), 1000);
        },
        debounce: function (fn, interval) {
            let timer = null; // 定时器
            return function () {
                // 清除上一次的定时器
                clearTimeout(timer);
                // 拿到当前的函数作用域
                let _this = this;
                // 拿到当前函数的参数数组
                let args = Array.prototype.slice.call(arguments, 0);
                // 开启倒计时定时器
                timer = setTimeout(function () {
                    // 通过apply传递当前函数this，以及参数
                    fn.apply(_this, args);
                    // 默认300ms执行
                }, interval || 300)
            }
        },
        getRefundList() {
            var self = this;
            if (!self.data.hasmore) return;
            $("#more").show();
            lobsterh5.GET("/lowcode/APP20200616102057595/shop/?fun=mall.GetRefundList", {
                page: self.data.page,
                limit: self.data.limit,
                userId: localStorage.getItem("userId")
            }).then(res => {
                self.data.refundList = res.data;
                self.data.refundList.forEach(a => {
                    var filter = self.data.refundStatusDict.filter(b => b.Code == a.RefundStatus);
                    if (filter.length > 0)
                        a.RefundStatustxt = filter[0].Name;
                    if (a.RefundType == 1)
                        a.RefundTypetxt = "退款";
                    if (a.RefundType == 2)
                        a.RefundTypetxt = "退货退款";
                    if (a.RefundType == 3)
                        a.RefundTypetxt = "未发货退款";

                })
                var html = template("refundlisttemp", { list: self.data.refundList, });
                $("#refundlist").append(html);
                if (res.data.length < self.data.limit) {
                    self.data.hasmore = false;
                    $("#more").text("没有更多了");
                } else {
                    $("#more").hide();
                    self.data.page++;
                }
            }).catch(res => {
            });
        },
        //获取支付类型字典
        getDic: function (classId) {
            return new Promise((resolve, reject) => {
                lobsterh5.GET("/common/v1/BasicData/GetAppBaseDict", {
                    classId: classId,
                    appKey: "APP20200616102057595"
                }).then(res => {
                    resolve(res);
                }).catch(res => {
                    reject(res);
                });
            })
        },
    })
</script>